<template>
  <div class="Work">
    <el-row :gutter="10">
      <el-col :md="24" :lg="18">
        <div class="welcome suspension">
          <img class="welcome-img" :src="headerSvg" />
          <div class="welcome-text">
            <div class="welcome-title">
              hmyAdmin,上午好,开始你的工作的一天吧
            </div>
            <div class="welcome-note">今日座右铭:生命是用来燃烧的</div>
          </div>
        </div>
      </el-col>
      <el-col
        v-if="!useMainStore().layoutConfig.shrink"
        :lg="6"
        class="hidden-md-and-down"
      >
        <div class="working">
          <img class="working-coffee" :src="workSvg" alt="" />
          <div class="working-text">
            您今天已工作<span class="time"> {{ state.workingTimeFormat }}</span>
          </div>
          <div @click="onChangeWorkState" class="working-opt working-rest">
            {{ state.pauseWork ? '继续工作' : '休息一会' }}
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from 'vue'
import useMainStore from '@/stores/main/main'
import localStorage from '@/utils/local-storage'
import headerSvg from '@/assets/img/yang.png'
import workSvg from '@/assets/img/coffee.svg'

const state: {
  workingTimeFormat: string
  pauseWork: boolean
} = reactive({
  charts: [],
  remark: 'dashboard.Loading',
  workingTimeFormat: '',
  pauseWork: false
})
onMounted(() => {
  startWork()
})
onUnmounted(() => {
  clearInterval(workTimer)
})
var workTimer = 0
const d = new Date()
const onChangeWorkState = () => {
  const time = parseInt((new Date().getTime() / 1000).toString())
  const workingTime = localStorage.get('workingTime')
  if (state.pauseWork) {
    // 继续工作
    workingTime.pauseTime += time - workingTime.startPauseTime
    workingTime.startPauseTime = 0
    localStorage.set('workingTime', workingTime)
    state.pauseWork = false
    startWork()
  } else {
    // 暂停工作
    workingTime.startPauseTime = time
    localStorage.set('workingTime', workingTime)
    clearInterval(workTimer)
    state.pauseWork = true
  }
}

const startWork = () => {
  const workingTime = localStorage.get('workingTime') || {
    date: '',
    startTime: 0,
    pauseTime: 0,
    startPauseTime: 0
  }
  const currentDate =
    d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
  const time = parseInt((new Date().getTime() / 1000).toString())

  if (workingTime.date != currentDate) {
    workingTime.date = currentDate
    workingTime.startTime = time
    workingTime.pauseTime = workingTime.startPauseTime = 0
    localStorage.set('workingTime', workingTime)
  }

  let startPauseTime = 0
  if (workingTime.startPauseTime <= 0) {
    state.pauseWork = false
    startPauseTime = 0
  } else {
    state.pauseWork = true
    startPauseTime = time - workingTime.startPauseTime // 已暂停时间
  }

  let workingSeconds =
    time - workingTime.startTime - workingTime.pauseTime - startPauseTime

  state.workingTimeFormat = formatSeconds(workingSeconds)
  if (!state.pauseWork) {
    workTimer = setInterval(() => {
      workingSeconds++
      state.workingTimeFormat = formatSeconds(workingSeconds)
    }, 1000)
  }
}

const formatSeconds = (seconds: number) => {
  var secondTime = 0 // 秒
  var minuteTime = 0 // 分
  var hourTime = 0 // 小时
  var dayTime = 0 // 天
  var result = ''

  if (seconds < 60) {
    secondTime = seconds
  } else {
    // 获取分钟，除以60取整数，得到整数分钟
    minuteTime = Math.floor(seconds / 60)
    // 获取秒数，秒数取佘，得到整数秒数
    secondTime = Math.floor(seconds % 60)
    // 如果分钟大于60，将分钟转换成小时
    if (minuteTime >= 60) {
      // 获取小时，获取分钟除以60，得到整数小时
      hourTime = Math.floor(minuteTime / 60)
      // 获取小时后取佘的分，获取分钟除以60取佘的分
      minuteTime = Math.floor(minuteTime % 60)
      if (hourTime >= 24) {
        // 获取天数， 获取小时除以24，得到整数天
        dayTime = Math.floor(hourTime / 24)
        // 获取小时后取余小时，获取分钟除以24取余的分；
        hourTime = Math.floor(hourTime % 24)
      }
    }
  }

  result =
    hourTime +
    '小时' +
    ((minuteTime >= 10 ? minuteTime : '0' + minuteTime) + '分') +
    ((secondTime >= 10 ? secondTime : '0' + secondTime) + '秒')
  if (dayTime > 0) {
    result = dayTime + 'dashboard.day' + result
  }
  return result
}
</script>

<style lang="less" scoped>
.Work {
  margin-bottom: 20px;
}
.welcome {
  background-color: var(--el-bg-color-overlay);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 15px 20px !important;
  box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
  .welcome-img {
    height: 100px;
    margin-right: 10px;
    user-select: none;
    border-radius: 50%;
  }
  .welcome-title {
    font-size: 1.5rem;
    line-height: 30px;
    color: var(--ba-color-primary-light);
  }
  .welcome-note {
    padding-top: 6px;
    font-size: 15px;
    color: var(--el-text-color-primary);
  }
}
.working {
  height: 130px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 100%;
  position: relative;
  &:hover {
    .working-coffee {
      -webkit-transform: translateY(-4px) scale(1.02);
      -moz-transform: translateY(-4px) scale(1.02);
      -ms-transform: translateY(-4px) scale(1.02);
      -o-transform: translateY(-4px) scale(1.02);
      transform: translateY(-4px) scale(1.02);
      z-index: 999;
    }
  }
  .working-coffee {
    transition: all 0.3s ease;
    width: 100px;
  }
  .working-text {
    display: block;
    width: 100%;
    font-size: 15px;
    text-align: center;
    color: var(--el-text-color-primary);
  }
  .working-opt {
    position: absolute;
    top: -40px;
    right: 10px;
    background-color: #ababab;
    padding: 10px 20px;
    border-radius: 20px;
    color: var(--ba-bg-color-overlay);
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0;
    z-index: 999;
    font-size: 12px;
    &:active {
      background-color: #ababab;
    }
  }
  &:hover {
    .working-opt {
      opacity: 1;
      top: 0;
    }
    .working-done {
      opacity: 1;
      top: 50px;
    }
  }
}
</style>
